<template>
  <tiny-dialog-box
    :visible="props.isShow"
    :center="data.data.center || voDialog.center"
    :title="data.data.title"
    :width="data.data.width || voDialog.width"
    append-to-body
    :close-on-click-modal="data.data.closeOnClickModal || voDialog.closeOnClickModal"
    :close-on-press-escape="data.data.closeOnPressEscape || voDialog.closeOnPressEscape"
    :destroy-on-close="data.data.destroyOnClose || voDialog.destroyOnClose"
    :dialog-class="data.data.dialogClass || voDialog.dialogClass"
    :draggable="data.data.draggable || voDialog.draggable"
    :fullscreen="data.data.fullscreen || voDialog.fullscreen"
    :is-form-reset="data.data.isFormReset || voDialog.isFormReset"
    :lock-scroll="data.data.lockScroll || voDialog.dial"
    :modal="data.data.modal || voDialog.modal"
    :right-slide="data.data.rightSlide || voDialog.rightSlide"
    :show-close="data.data.showClose || voDialog.showClose"
    :show-header="data.data.showHeader || voDialog.showHeader"
    @open="open"
    @close="close"
    @opened="opened"
    @closed="closed">
    <div class="dialog-style" :style="{'--dialogHeight': dialogHeight}" v-if="isShow"><slot /></div>
    <template #footer v-if="footer">
      <tiny-button type="primary" @click="handlerSubmit = false"> 确定 </tiny-button>
      <tiny-button @click="handlerCancer = false"> 取消 </tiny-button>
    </template>
  </tiny-dialog-box>
</template>

<script setup>
  import {ref, reactive, toRefs, onBeforeMount, onBeforeUpdate, computed} from 'vue';

  import {DialogBox as TinyDialogBox} from '@opentiny/vue';
  import voDialog from '@/pub/vo-dialog.js';

  const props = defineProps({
    data: {
      type: Object,
      default: {},
    },
    footer: {
      type: Boolean,
      default: false,
    },
    title: {
      String,
      default: '',
    },
    isShow: {
      type: Boolean,
      default: false,
    },
  });
  const data = reactive({
    data : props.data
  })

  const emits = defineEmits(['update:isShow', 'open', 'opened', 'close', 'closed']);

    // 定义一个全局的 z-index 基准值
  const baseZIndex = 3000;
  // 动态 z-index 值
  const dynamicZIndex = ref(baseZIndex);

  onBeforeUpdate(() => {
    //更新数据
    updateStyle();
        // 每次更新时增加 z-index 值
    dynamicZIndex.value += 1;
  });
  const dialogHeight = ref('');
  const updateStyle = () => {
    dialogHeight.value = props.data.height || '60vh';
  };

  const handlerCancer = () => {
    emits('update:isShow', false);
  };
  const handlerSubmit = () => {
    // dialog 点击确定按钮之前处理相关业务逻辑
    emits('update:isShow', false);
  };

  const isShow = computed({
    get: () => props.isShow,
    set: val => {
      emits('update:isShow', val);
    },
  });
  //打开前
  const open = () => {
    emits('open');
  };
  //打开后
  const opened = () => {
    emits('opened');
  };
  //关闭前
  const close = () => {
    emits('close');
    emits('update:isShow', false);
  };
  //关闭后
  const closed = () => {
    emits('closed');
    emits('update:isShow', false);
  };
</script>
<style lang="scss" scoped>
  :deep(.tiny-dialog-box__header) {
    padding: 5px 10px;
  }
  :deep(.tiny-dialog-box__body) {
    width: 99%;
    height: 100%;
    padding: 10px;
    overflow: hidden;
  }
  .dialog-style {
    padding: 10px;
    overflow: auto;
    width: 100%;
    height: var(--dialogHeight);
    min-height: 200px;
    overflow: hidden;
  }
</style>
